<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<jsp:include page="header.jsp"></jsp:include>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
		<base href="<%=basePath%>">
		<link  rel="stylesheet"  type="text/css"  href="<%=basePath %>/template/shop/css/register.css">
		<script type="text/javascript">
		    $(function(){
		    	$("#imageChange").click(function(event){
		    		 $("#membervocde").attr("src","account/getVerifyCode?"+Math.random());
		    		 
		    	});
		    	function a(){
		    		$("#imageChange").trigger("click")();
		    	};
		    	a();
		    	$("#registerBar").submit(function(){
		    		var flagVerifyCode =false;
		    		$.ajax({
		                type: "get",
		                async:false,
		                url: "./account/checkVerifyCode",
		                dataType: "json",
		                data: { "verifyCode": $("#iptsingup").val() },
		                success: function (data) {
		                	if(data!=true){
		                		flagVerifyCode=false;
		                		$("#message").html("验证码输入不正确");
		                	}else{
		                		flagVerifyCode=true;
		                	}
		                	
		                },
		                error: function () {
		                    alert("IP地址有问题1");
		                }
		            });
		    		
		    		if(flagVerifyCode!=true){
		    			return false;
		    		}
		    	});
		    })
	    </script>
</head>
<body>
		<div class="all-wrap" id="container">

		<div class="PassportWrap">
<div class="passport_signup_case passport_case">
    <form id="registerBar" class="signupform" action="account/register" method="post">
        <input type="hidden" value="" name="forward">
        <div class="intro">
            <div class="customMessages">
                <!--register_message-->
            </div>
        </div>
        <div class="loginbox">
            <ul>
                <li>
                <label class="login-k"><i>*</i>用户名：</label>
                <div class="login-v common_form_val"><input type="text" caution="请填写正确的用户名" maxlength="30" id="reg_user" data-full="true" vtype="required&amp;&amp;uname" name="reg_user" class="x-input inputstyle" autocomplete="off"><span><span class="comment caution notice-inline">请输入6&mdash;20位字符，可使用字母和数字组合</span></span></div>
                </li>
                <li>
                <label class="login-k"><i>*</i>密码：</label>
                <div class="login-v common_form_val"><input type="password" onpaste="return false;" oncontextmenu="return false;" id="reg_passwd" caution="请填写正确的密码" data-full="true" vtype="required&amp;&amp;password" name="reg_passwd" class="x-input inputstyle"><span><span class="comment caution notice-inline">请输入6至20个字母或数字组成的字符</span></span></div>
                </li>
                <li>
                <label class="login-k"><i>*</i>确认密码：</label>
                <div class="login-v common_form_val"><input type="password" onpaste="return false;" oncontextmenu="return false;" id="reg_passwd_r" data-full="true" vtype="confirm_password&amp;&amp;password" caution="" name="pam_account[psw_confirm]" class="x-input inputstyle"><span><span class="comment caution notice-inline">请再输入一次密码</span></span></div>
                </li>
                <li>
                <label class="login-k"><i>*</i>电子邮箱：</label>
                <div class="login-v common_form_val"><input type="text" placeholder="yourname@xx.com" caution="请填写正确的邮箱，例如：yourname@hotmail.com" id="reg_email" name="reg_email" data-full="true" vtype="required" class="x-input " autocomplete="off"><span><span class="comment caution notice-inline">请输入你的常用邮箱</span></span></div>
                </li>
                <li>
                <label class="login-k"><i>*</i>验证码：</label>
                <div class="login-v common_form_val passport_login_kocde"><input type="text" data-full="true" id="iptsingup" name="verifycode" maxlength="4" size="4" vtype="number&amp;&amp;required" class="x-input x-input" autocomplete="off">
                	<span class="verifyCodebox">
				      <img align="absmiddle" id="membervocde" src="http://localhost:8080/51milks/account/getVerifyCode"> 
				      <a id="imageChange" class="link" href="javascript:void(0)">换一张</a>
			      	</span>
                </div>
                </li>
                <li><div id="message" style="color: red;margin-left: 128px;">${message }</div></li>
                <li>
                <label class="login-k">&nbsp;</label>
                <div class="login-v"><input type="checkbox" autocomplete="off" id="license" name="license" value="agree" vtype="requried"> 我已阅读并同意 <a target="_blank" class="lnk" id="terms_error" href="http://sh.shequ001.com/article--36.html"><span id="terms_error_sym" class="FormText">会员注册协议</span></a>和<a target="_blank" class="lnk" id="privacy_error" href="http://sh.shequ001.com/article--35.html"><span id="privacy_error_sym" class="FormText">隐私保护政策</span></a>。</div>
                </li>
                <li>
                <label class="login-k">&nbsp;</label>
                <div class="login-v common_form_sub signup_sub">
                    <button data-ajax-config="{onComplete:function(rs){ if(rs[0]&amp;&amp;rs[0].error){ refreshVcode();}}}" value="立即注册" class="btn common-btn" rel="_request" type="submit"><span><span>立即注册</span></span></button>                    <input type="hidden" value="" name="forward">
                </div>
                </li>
            </ul>
         </div>
    </form>
    </div>
    
	<script>

		$('#reg_user').blur(function(){
			var input = this;
			if(input.value!=''){
				$.ajax({
	                type: "post",
	                async:false,
	                url: "./account/checkUsername",
	                dataType: "json",
	                data: { "username": $("#reg_user").val() },
	                success: function (rs) {
						if(rs[0]=='true') {
							$('#reg_user').next().html('<span class="error caution notice-inline">' +rs[1] + '</span>');
						}
						else if(rs[0]=='false') {
							$('#reg_user').next().html('<span class="success caution notice-inline">&nbsp;</span>');
						}
	                },
	                error: function () {
	                    alert("IP地址有问题1");
	                }
	            });
			}
		});
		
		$('#reg_email').blur(function(){
			var input = this;
            if(input.value!=''){
            	//checkEmail($('#reg_email').val());
            	 var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
            	    if(re.test($('#reg_email').val())){
            	    	$('#reg_email').next().html('<span class="success caution notice-inline">&nbsp;</span>');
            	    }else{
            	    	$('#reg_email').next().html('<span class="error caution notice-inline">邮箱格式不正确</span>');
            	    	return false;
            	    }
            	$.ajax({
	                type: "get",
	                async:false,
	                url: "./account/checkEmail",
	                dataType: "json",
	                data: { "email": $("#reg_email").val() },
	                success: function (rs) {
						if(rs[0]=='true') {
							$('#reg_email').next().html('<span class="error caution notice-inline">' +rs[1] + '</span>');
						}
						else if(rs[0]=='false') {
							$('#reg_email').next().html('<span class="success caution notice-inline">&nbsp;</span>');
						}
	                	
	                },
	                error: function () {
	                    alert("IP地址有问题");
	                }
	            });
            }
			
		});
		
		$('#reg_email').focus(function(){
			
			$(this).next().html('<span class="comment caution notice-inline">请填写正确的邮箱，例如：yourname@hotmail.com</span>');
		});
		
		$('#reg_passwd,#reg_passwd_r').blur(function(){
			var content = $(this).val();
			if(content){
                    //检测长度
                    if(content.length<6 || content.length >20){
                        //长度不符合
                        if($(this).attr("id")=='reg_passwd'){
                            $(this).next().html('<span class="error caution notice-inline">请填写正确的密码</span>');
                        }else{
                            if($('#reg_passwd_r').val()!=$('#reg_passwd').val()){
                                $(this).next().html('<span class="error caution notice-inline">两次密码输入不一致0</span>');
                            }
                        }
                    }else{
                        //长度符合 并且非空
                        if($('#reg_passwd_r').val()!=$('#reg_passwd').val()){

                            if($(this).attr("id")=='reg_passwd_r'){
                                $(this).next().html('<span class="error caution notice-inline">两次密码输入不一致</span>');
                            }else{
                            	 $(this).next().html('<span class="success caution notice-inline">&nbsp;</span>');
                            }
                        }else{
                            $(this).next().html('<span class="success caution notice-inline">&nbsp;</span>');
                        }
                    }
                }
		});
	
		$('.x-input').focus(function(){
			$(this).css("border","1px solid #972627");
		});
		$('.x-input').blur(function(){
			$(this).css("border","1px solid #ddd");
		});
		
		function setWidth() {
			$("#navTotal,#container,#CON--bg").width(document.body.scrollWidth);
		}
		$("#bodyContent,#container").width(document.body.scrollWidth);
		setInterval(setWidth, 1000);
		
	</script>
</div>

	</div>
</body>
</html>